Now let's create a preview frame on the right.
And when you click one of the items, it's going to show the image, the name, the price, and then
a buy button.
So we're going to go to our starter gooey.
Open that up screen gooey shop frame and we have our items frame here.
Let's go to the shop frame, hit the plus, add a regular frame.
This is going to be our I'll call it to buy frame.
Right.
But it's the preview.
But we're also going to hit we're going to have the buy button on there.
All right.
So we're going to change some things on that.
I'm going to keep my background color white until I'm finished.
Let's go to possession.
So at 0000, let's move that out to 0.5 on the x zero pixel offset down to 0.1 on the Y to compensate
for the top bar to zero pixel offset and then for the size on the x will make that 50% of the x, so
half of the window zero pixel offset and then 0.9 for the Y because 0.1 is for the top bar.
There we go.
Now we can put stuff on here.
I'm going to add hit the plus, add a UI list layout so I don't have to mess around with my positioning
as much and then I'm going to get hit the plus sign on the two by frame.
One more time.
I need an image label.
There we go right there.
So my image label, I think I'll just call this image LBL.
Let's make sure we maintain our aspect ratio.
I'll change the size of the image label to be scale.
So go to size.
Let's do 40%.
So 0.40.4 comma zero.
And then hit the plus sign on the image label.
We have that UI aspect ratio.
Here we go.
On the UI aspect ratio, the dominant access axes is the Y, the width or not, the y, the x, the
width.
Let's go to aspect type scale with parent.
I think that's pretty good.
Now I want to center this.
So rather than messing around with the position because we have the UI list layout.
I'm going to click the UI list layout, horizontal alignment.
Let's make that.
Center and then vertical alignment.
I'm going to center that, too.
And then as we add stuff below it, it's going to move up.
So let's go to our two by frame.
Hit the plus.
We're going to need a text label for our item name.
There we go.
And we'll call this item name.
And let's change the size of that.
Right here in their size.
I'll do 0.8 on the x zero pixel offset 0.1 on the Y zero pixel offset.
And you can see that there's no spacing.
We can change that.
Let's go to our UI list layout again.
And then I'm going to scroll up to where it says padding, and maybe I'll do scale, do a 0.01.
That's a little bit of padding.
We might want to put a little bit more in there.
Maybe 0.02 will do it.
That's.
That's fine.
All right.
And let's go back to our item name.
I think I'm going to call that name label instead.
Name label.
That's a little bit clearer, I think.
All right.
Let's take a look at what we got here.
I think I'm going to change the background transparency for that label to one so we don't see the background.
And then.
Size is good.
We did that.
We need to change the font font face.
Let's change that to that comic that we've been using and I'll just hit the text scale for the size.
I think that'll work.
I'm going to duplicate this.
I'm going to hit a control D and then this one is going to be the price label.
Lot of work and.
Let's clear these texts out.
Let's hit the text on the price label.
Nothing.
It's good to know where they're at because they're invisible now.
Right.
And then text nothing.
I'm going to add a button.
That's going to be the buy button.
Text button.
Right.
And then we need to change the name of that.
Let's call that bye button.
Maybe make that color green.
Green means go.
Right.
Cool.
I won't change the size.
I'll make this like 0.6.
Let's make that 0.6 on the x zero pixel offset.
How big did we make?
The labels was a 0.4.
Maybe we'll do 0.2.
I think I did 0.1 on the labels.
Yeah, that's pretty big.
I think that's good, though, because don't forget, you have to click the button and if it's on a
mobile, you need it to be big enough.
These other things you could probably read.
No problem.
Let's scroll down.
We've got to change our our font comic.
And.
Text we could change this by.
I will make the text scale.
There we go.
Now I'm going to change the background to my frame, my to buy frame.
Let me make it the same as this background.
So maybe just go to my items, frame, scroll up and get the items.
Frame is invisible.
I'm just going to have to change it by hand.
Did I remember what it was?
I think I did two by frame.
I went to Purple.
And then I change that color a little bit, didn't I?
I changed it to 202 hundred on the red and the green.
That's right.
Nice.
And then we have those two labels right here we can't see.
But that's all right.
We're going to add some code and then you're going to be able to see it.
Let's just take a look.
Let's just take a look at what happens if we squish it.
That's not too bad.
And then maybe add the output window, squished it that way.
Yeah, that's not bad.
That's not bad.
Let's add some let's add some code now.
So when we press the button, we'll get the image, we'll get the name, we'll get the price, and maybe
write the button, print out for it.
Now let's add some code to our shop so we can preview the items when we press the button.
Let's go to we're under starter gooey screen, gooey shop, frame shop script.
And here's my button table right here.
Underneath the button table.
I'm going to add a few variables.
I'm going to add one called preview image.
I'll just do IMG shop frame to buy frame and item.
What do I call that item image or image image label.
That's what it was.
And then I need another one.
Preview name shot frame two by frame, name label and finally preview price shot.
Frame two by frame and with that price label.
So I'm basically just making variables because this is too long to type in.
All right.
And this is where we loop through all of our buttons and we are going to get our activated event connected
to this preview item function passing in the button, right?
Because on the button we're going to need.
I image ID, item, name and price so that we can get the text that we want and then we could display
the stuff we want in our preview.
So let's do a local function.
I always do that.
I preview item and the buttons are going to be passed and I'll just call BTN.
Just make sure that this preview item doesn't clash with anything up here because you'll mess up the
variable with the function name.
And once we get that, let's do our let's get our preview image right.
We're going to get our preview image, and that has a dot image property and that's going to get this
value right here for each individual button.
So we have our BTN image ID, dot value is going to go into that property right there.
We'll get our preview name and that is a text field.
So we're going to update the text button has that string called item name.
I should have kept those names a little more consistent.
That's a value preview Price text button dot.
I just called it price.
All right.
So these these should match price to price item named item name, image ID, image ID, and these are
UI component names.
I think that looks good.
Now we can go ahead and uncomment this out and let's go ahead and test it.
Let's hit the play button.
There's a little guy.
Let's pop that thing open and simple pistol.
Well, we got the simple pistol name and we got the price right.
But the image is wrong.
Let's try this one.
Oh, so they're flipped.
I flipped my images.
That's all right.
Let's go back and fix that.
Hit the stop.
Let's go out to server storage, not server storage, replicated storage.
That's where we have our our fabulous lemon and our simple pistol.
Let's open the fabulous lemon.
Actually, we don't even need to open it.
Just press fabulous.
LEMON And then under the texture ID, just click that and then we'll copy it.
There we go.
Control C and I click that again to close it.
I'm going to go down to this is one item.
What item is that?
That's simple pistol.
I need to go to the fabulous.
LEMON Right.
That's fabulous.
LEMON All right.
So I'm going to go to my item, our image idea of my fabulous lemon control V.
There we go.
Now, I got to get the pistol for the one above.
Simple pistol.
There it is.
Grab that control C.
An item name is simple pistol.
Good.
The item id change it look good.
Let's play it.
That's better.
There we go.
Simple pistol.
Fabulous.
Lemon, Can we close it?
Yep.
Let's go back to coding.